<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>孩子选择器demo</title>
    <style>
        body{background-color: gray;}
        /*匹配p标签的父元素(div)的孩子中,满足3n+0位置的元素,并且是p元素的所有元素;*/
        p:nth-child(3n+0){background:red;}
        /*匹配li的父元素(ul)的孩子中,满足奇数位置并且是li元素的所有元素*/
        li:nth-child(odd){color: yellow;}
    </style>
</head>
<body>
<div>
    <h1>这是标题</h1>
    <p>第一个段落。</p>
    <p>第二个段落。</p>
    <p>第三个段落。</p>
    <p>第四个段落。</p>
    <p>第五个段落。</p>
    <p>第六个段落。</p>
    <p>第七个段落。</p>
    <p>第八个段落。</p>
    <p>第九个段落。</p>
    <ul>
        <li>第一个</li>
        <li>第二个</li>
        <li>第三个</li>
        <li>第四个</li>
        <li>第五个</li>
    </ul>
</div>
</body>
</html>